<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../static/icon/iconfont.css">
    <link rel="stylesheet" href="../static/css/post.css">
    <script src="../static/echarts.min.js"></script>
</head>

<main>
    <div class="title">
        <span>公司性质分析</span>
    </div>
    <hr>
    <div  class="result-box">
        <div id="chart1"  class="result-chart" style="width: 600px;height: 500px;margin: 0 auto;"></div>
        <script  type="text/javascript">
            var myChart1 = echarts.init(document.getElementById('chart1'));
            myChart1.setOption({
            emphasis: { itemStyle: {
                // 高亮时点的颜色
                color: '#96BFFF' },
                label: { show: true,
                // 高亮时标签的文字 formatter: '高亮时显示的标签内容'
                }
                },
                series : [{
                        type: 'pie',// 设置图表类型为饼图
                        radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较 小一项）的 55% 长度。
                        center:['50%','35%'],
                        color: ['#4169E1','#FF69B4', '#CD5C5C','#FFA500', '#BA55D3', '#6A5ACD', '#00FFFF', '#FFB6C1','#00FA9A','#749f83','#2E8B57', '#FFD700', '#808080','#6e7074', '#546570', '#c4ccd3'],
                        data:[{% for item in  type %}{value:{{item[1]}}, name:'{{item[0]}}'},{% endfor %}],
                    roseType: 'angle',
                        label:{
                            normal:{
                                formatter:'{d}%',
                                textStyle : {
                                    fontWeight : 'normal',
                                    fontSize : 10
                                }
                            }
                        }
                    }],
                legend:{
                    // orient:'vertical',
                    left:'70',
                    bottom:'20',
                    width:450,
                    data:[{% for item in  type %}'{{item[0]}}',{% endfor %}],
                    formatter:[ '{a|{name}}'].join('\n'),
                    textStyle:{
                        rich:{
                            a:{
                                width:70,
                                fontSize:10,
                                lineHeight:10
                            }
                        }
                    }
                },
            title: {
                    text: '热门领域-公司数量饼状图',x: 'center',y: '95%',textStyle: {fontsize:12,fontWeight: "bold"}
                },
            })
        </script>
    <hr>
        <div id="chart2"  class="result-chart" style="width: 500px;height: 450px;margin: 0 auto;"></div>
        <script type="text/javascript">
            var myChart2 = echarts.init(document.getElementById('chart2'));
            var option = {
                title: {
                    text: '热门领域-公司数量条形图',x: 'center',y: '95%',textStyle: {fontsize:12,fontWeight: "bold"}
                },
                tooltip: {},
                legend: {},               
                xAxis: {
                    axisLabel: {
                        interval:0,
                        rotate:40
                    },
                    data: [
                        {% for item in type %}
                            "{{ item[0] }}", 
                        {% endfor %}
                    ]
                },
                yAxis: {},
                series: [{
                    type: 'bar', 
                    itemStyle: {
                        normal: {
                            //这里是颜色
                            color: function(params) {
                                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                var colorList = ['#4169E1','#FF69B4', '#CD5C5C','#FFA500', '#BA55D3', '#6A5ACD', '#00FFFF', '#FFB6C1','#00FA9A','#749f83','#2E8B57', '#FFD700', '#808080'];
                                var index;
                                //给大于颜色数量的柱体添加循环颜色的判断
                                if (params.dataIndex >= colorList.length) {
                                    index = params.dataIndex - colorList.length;
                                    return colorList[index];
                                }
                                return colorList[params.dataIndex];
                            }
                        }
                    },
                    data: [
                        {% for item in type %} 
                            {{ item[1] }}, 
                        {% endfor %}
                    ],
                }]
            };
            myChart2.setOption(option);
        </script>
    </div>
</main>
</html>